<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/layout :: common_header(~{::title},~{::link})">
<title>菜单管理</title>
<!-- 
  additional css  -->
<link
	th:href="@{/ace/plugins/treeTable/themes/vsStyle/treeTable.min.css}"
	rel="stylesheet" type="text/css" />

</head>

<body>
	<div class="main-container">
		<div class="main-content-inner">
			<div class="page-content">

				<div class="row">
					<div class="col-sm-12">
						<div class="pull-left">
							<button class="btn btn-primary btn-sm" data-toggle="tooltip"
								data-placement="left" onclick="add()" title="添加">
								<i class="fa fa-plus"></i> 新建菜单
							</button>
							<button class="btn btn-warning btn-sm" data-toggle="tooltip"
								data-placement="left" onclick="refresh()" title="刷新">
								<i class="glyphicon glyphicon-repeat"></i>刷新
							</button>
						</div>
						<div class="pull-right"></div>
					</div>
				</div>

				<div class="row">
					<div class="col-xs-12">
						<table id="treeTable" class="table table-striped table-bordered table-condensed">
							<thead>
								<tr>
									<th>名称</th>
									<th>链接</th>
									<th>排序</th>
									<th>显示/隐藏</th>
									<th>权限标识</th>
									<th>备注</th>
									<th>操作</th>
								</tr>
							</thead>
							<tbody id="treeTableList">
								<tr th:each="menu:${menuList}" th:id="${menu.id}"
									th:pid="${menu.parentId}">
									<td  ><a><i th:class="${menu.icon}"></i>[[${menu.name}]]</a></td>
									<td th:text="${menu.href}"></td>
									<td th:text="${menu.sort}"></td>
									<td th:text="${menu.isShow}"></td>
									<td th:text="${menu.permission}"></td>
									<td th:text="${menu.remarks}"></td>
									<td><a href="#" th:onclick="'edit('+${menu.id}+')'"><i
											class="fa fa-edit"></i> 修改</a> &nbsp;&nbsp;&nbsp; <a href="#"
										th:onclick="'del('+${menu.id}+')'"><i class="fa fa-trash"></i>
											删除</a> &nbsp;&nbsp;&nbsp; <a href="#"
										th:onclick="'addsubarea('+${menu.id}+')'"><i
											class="fa fa-plus"></i> 添加下级菜单</a></td>
								</tr>

							</tbody>
						</table>
					</div>
				</div>
				<!-- /.col -->
			</div>

		</div>
		<!-- end main container -->
	</div>

	<div th:replace="common/commonJS"></div>
	<script th:src="@{/ace/plugins/treeTable/jquery.treeTable.min.js}"></script>
	<script>
		function refresh() {
			window.location.reload()
		}
		function add() {
			jp.openWindow("新增" + '菜单', "sys/menu/add", "800px", "420px");
		}

		function addsubarea(parent) {
			jp.openWindow("新增" + '菜单', "sys/menu/add?parentId=" + parent,
					"800px", "420px");
		}

		function edit(id) {

			jp.openWindow("修改" + '菜单', ctx + "sys/menu/edit/" + id, "800px",
					"420px");

		}

		function del(id) {
			jp.confirm('确定要删除该菜单和所有子菜单吗？', function() {
				jp.loading();
				$.get(ctx + "sys/menu/delete?id=" + id, function(data) {
					if (data == 1) {
						jp.alert("删除成功！")
						refresh();
					} else {
						jp.error("删除失败");
					}
				})
			});
		}

		$(function() {

			$("#treeTable").treeTable({
				expandLevel : 2
			});
		});
	</script>
</body>
</html>